import React, { Component } from 'react';
import s1 from './Son1.module.scss'
class Son1 extends Component {
    constructor() {
        super()
        this.state = {
            data: [{
                one: 'loading',
                two: 'loading',
                three: 'loading',
                four: 'loading',
                five: 'loading'
            }],
            // number:'loading...'
        }
    }
    componentDidMount() {
        const datas = [{
            one: '香港',
            two: 163,
            three: 15011,
            four: 11319,
            five: 250
        }]
        // const datas = ['香港',163,15011,11319,250]
        setTimeout(() => {
            this.setState({ data: datas })
            console.log(this.state.data)
        }, 2000)
        // console.log(datass)
    }
    render() {
        // const {data} = this.state.data
        return (
            <div className={s1.son1}>
                <div className={s1.main_top}>
                    <div className={s1.left}>
                        <span>更新至:</span>
                        <span>2021-04-04</span>
                    </div>
                    <div className={s1.right}>
                        <span>疫情数据</span>
                    </div>
                    <div className={s1.clear}></div>
                </div>
                <div className={s1.main}>
                    <div className={s1.main_hed
                    }>
                        <ul>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                            <li>
                                <div>
                                    <p>累计确诊</p>
                                    <h3>102908</h3>
                                    <span>相较昨日</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div className={s1.main2}>
                        <h3>国内疫情</h3>
                        <p>7:00-10:00为更新高峰，数据若滞后敬请谅解</p>
                    </div>
                    <table className={s1.main3}>
                        <thead>
                            <tr>
                                <th className={s1.one}>省份</th>
                                <th className={s1.two}>现有确诊</th>
                                <th className={s1.three}>累计确认</th>
                                <th className={s1.four}>治愈</th>
                                <th className={s1.five}>死亡</th>
                            </tr>
                        </thead>
                        <tbody className={s1.main3_main}>
                            <tr>
                                {
                                    // p标签为什么不显示, <s>剩下的四个td怎么写</s>
                                    // 是不是每次{arr.map}创建只能创建一个?
                                    this.state.data.map((item, index, arr) => {
                                        return this.state.data === [] ? <p key={index}>{item.one}</p>  :
                                            <td key={index} className={s1.one}> {item.one} </td>
                                    })
                                }
                                {
                                    // p标签为什么不显示,剩下的四个td怎么写
                                    this.state.data.map((item, index, arr) => {
                                        return this.state.data === [] ? <p key={index}>数据加载中</p> :
                                            <td key={index} className={s1.two}> {item.two} </td>
                                    })
                                }
                                {
                                    // p标签为什么不显示,剩下的四个td怎么写
                                    this.state.data.map((item, index, arr) => {
                                        return this.state.data === [] ? <p key={index}>数据加载中</p> :
                                            <td key={index} className={s1.three}> {item.three} </td>
                                    })
                                }
                                {
                                    // p标签为什么不显示,剩下的四个td怎么写
                                    this.state.data.map((item, index, arr) => {
                                        return this.state.data === [] ? <p key={index}>数据加载中</p> :
                                            <td key={index} className={s1.four}> {item.four} </td>
                                    })
                                }
                                {
                                    // p标签为什么不显示,剩下的四个td怎么写
                                    this.state.data.map((item, index, arr) => {
                                        return this.state.data === [] ? <p key={index}>数据加载中</p> :
                                            <td key={index} className={s1.five}> {item.five} </td>
                                    })
                                }
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        );
    }
}

export default Son1;